<template>
	<view>

		<!-- 消息列表 -->
		<template v-if="list.length>0">
			<block v-for="(item,index) in list" :key="index">
				<msg-list :item="item" :index="index"></msg-list>
			</block>
		</template>
		<template v-else>
			<no-thing></no-thing>
		</template>

		<!-- 弹出层 -->
		<uni-popup ref="popup" class="vh" style="height:80vh;" type="top">
			<view class="flex align-center justify-center border-bottom py-2" hover-class="bg-light" @click="popupEvent('friend')">
				<text class="iconfont icon-sousuo"></text>添加好友
			</view>
			<view class="flex align-center justify-center py-2" hover-class="bg-light" @click="popupEvent('clear')">
				<text class="iconfont icon-shanchu"></text>清除列表
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const demo = [{
			avatar: "/static/default.jpg",
			username: "猪猪",
			update_time: "1614160711",
			data: "今晚吃饭",
			noread: 20
		},
		{
			avatar: "/static/default.jpg",
			username: "猪猪",
			update_time: "1614160711",
			data: "今晚吃饭",
			noread: 20
		},
		{
			avatar: "/static/default.jpg",
			username: "猪猪",
			update_time: "1614160711",
			data: "今晚吃饭",
			noread: 20
		},
		{
			avatar: "/static/default.jpg",
			username: "猪猪",
			update_time: "1614160711",
			data: "今晚吃饭",
			noread: 20
		},
		{
			avatar: "/static/default.jpg",
			username: "猪猪",
			update_time: "1614160711",
			data: "今晚吃饭",
			noread: 20
		},
		{
			avatar: "/static/default.jpg",
			username: "猪猪",
			update_time: "1614160711",
			data: "今晚吃饭",
			noread: 20
		},
	]
	// 角标
	import msgList from '@/components/msg/msg-list.vue'
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	export default {
		components: {
			msgList,
			uniPopup
		},
		onLoad() {
			this.list = demo;
		},
		// 监听原生导航栏按钮事件
		onNavigationBarButtonTap(e) {
			console.log(e) //通过index=0=1判断点击的是左边还是右面
			switch (e.index) {
				case 0:
				// this.$refs.popup.close();
				uni.navigateTo({
					url:"../user-list/user-list"
				})
					break;
				case 1:
					// 通过组件定义的ref调用uni-popup方法
					this.$refs.popup.open();
					break;
			}
		},
		data() {
			return {
				// time.js配合10位数时间戳
				list: []
			}
		},

		// 监听下拉刷新
		onPullDownRefresh() {
			this.refresh()
		},
		methods: {
			refresh() {
				setTimeout(() => {
					this.list = demo;
					uni.stopPullDownRefresh()
				}, 2000)
			},
			// 点击弹出层的事件
			popupEvent(e) {
				switch (e) {
					case 'friend':
						console.log('添加好友')
						break;
					case 'clear':
						console.log('清除列表')
						break;
				}
				this.$refs.popup.close();//点击其他区域关闭弹出层
			}
		}
	}
</script>

<style>
	.vh {
		height: 5vh;
	}
</style>
